<template>
  <div class="contain">
    <img src="@/assets/images/xiankuang.png" class="bgcClass" />
    <TopPart />
    <div class="boxClass">
      <div>
        <div class="titleClass">{{ theFirst }}</div>
        <a-spin size="large" v-if="loading" />
        <div v-else>
          <div class="tipClass">
            <div></div>
            <div></div>
            <div>五分计法</div>
            <div>小数计法</div>
          </div>
          <div class="dataClass">
            <img src="@/assets/images/youyan.svg" />
            <div>左眼</div>
            <div class="numberClass" style="color: #348bfb">
              {{ testingData.leftEye }}
            </div>
            <div class="numberClass">{{ testingData.leftXS }}</div>
          </div>
          <div class="dataClass">
            <img src="@/assets/images/zuoyan.svg" />
            <div>右眼</div>
            <div class="numberClass" style="color: #348bfb">
              {{ testingData.rightEye }}
            </div>
            <div class="numberClass">{{ testingData.rightXS }}</div>
          </div>
        </div>
      </div>
      <div
        class="imgsClass"
        @keydown="handleKeyDown"
        tabindex="0"
        style="outline: none; cursor: pointer"
      >
        <img src="@/assets/images/ykq.svg" />
      </div>
    </div>
  </div>
</template>

<script>
import TopPart from "@/components/TopPart";
import { mapGetters } from "vuex";
import { debounce } from "ant-design-vue/lib/vc-table/src/utils";
export default {
  components: {
    TopPart,
  },
  data() {
    return {
      timer: null, //定时器
      theFirst: "",
      loading: false,
      msg: "",
      synth: "",
    };
  },
  computed: {
    ...mapGetters({
      testingData: "getTestingData",
      childList: "getChildList",
    }),
  },
  created() {
    let list = this.childList;
    let index = sessionStorage.getItem("currentIndex");
    if (list[index]) {
      this.theFirst = list[index].nickName;
    }
  },
  mounted() {
    this.$el.getElementsByClassName("imgsClass")[0].focus();

    this.timer = setInterval(() => {
      this.$el.getElementsByClassName("imgsClass")[0].focus(); //获取焦点，不然遥控器容易失去控制
    }, 1000);
  },
  destroyed() {
    /* clearInterval(this.timer); */
  },
  methods: {
    submitResults() {
      this.loading = true;
      let nowIndex = parseInt(sessionStorage.getItem("currentIndex"));
      let StudentData = this.childList;
      let nowStudentData = this.childList[nowIndex];
      let user = JSON.parse(sessionStorage.getItem("myUserInfo"));
      let classData = JSON.parse(sessionStorage.getItem("classData"));
      console.log(StudentData, "StudentData");
      console.log(nowIndex, "nowIndex");
      console.log(nowStudentData, "nowStudentData");
      let data = {
        glasses: nowStudentData?.status ? 1 : 0, //0不戴眼镜 1戴
        leftVisionData: this.testingData.leftEye,
        rightVisionData: this.testingData.rightEye,
        testSource: 6, //测试来源 0App 1智能视力表 2小程序 3屈光仪 其他系统导入 6刷卡
        uid: user.uid,
        screeningId: sessionStorage.getItem("screeningId"),
        loginKey: user.loginKey,
        classId: classData.id,
        type: 0, // （0视力;1屈光;2视力+屈光）为null默认为视力
        childrenId: nowStudentData.id,
      };
      if (nowIndex + 1 == StudentData.length) {
        clearInterval(this.timer);
        this.$el.getElementsByClassName("boxClass")[0].focus();
      }
      this.$POST("/pad/uploadPadDioptreData", data)
        .then((response) => {
          if (response.errorCode == "SUCCESS") {
            // this.$notification.success({message: '成功', description: '视力检测完成'})
            sessionStorage.setItem("nowEye", "left");
            this.$router.push({
              path: "/TestsComplete",
            });
            return;
          } else {
            this.loading = false;
            this.$notification.error({
              message: "失败",
              description: response?.errMsg || "失败",
            });
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$notification.error({
            message: "错误",
            description: error?.errMsg || "请求出错,请重试",
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    nextEyeTest() {
      sessionStorage.setItem("nowEye", "left");
      this.$router.push({
        path: "/ChooseEye",
      });
    }, // 前往下一个眼睛测试
    handleKeyDown: debounce(function (event) {
      console.log("event", event);
      switch (event.key) {
        case "Enter":
          // 看不清
          this.submitResults();
          break;
        default:
          break;
      }
    }, 600),
  },
};
</script>

<style lang="less" scoped>
.contain {
  padding: 1% 2%;
  height: 100%; /* 至少为视口高度 */
  display: flex;
  flex-direction: column;
  .bgcClass {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .boxClass {
    flex: 1;
    background-color: #fff;
    border-radius: 0.06rem;
    padding: 0.15rem 0 0.34rem;
    font-size: 0.15rem;
    font-weight: bold;
    position: relative;
    & > div:first-child {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      .titleClass {
        width: 70%;
        background-color: #f1f6ff;
        margin: 0 auto;
        padding: 0.05rem 0;
        margin-bottom: 0.2rem;
      }
      .tipClass {
        width: 100%;
        display: flex;
        color: #939695;
        font-size: 0.15rem;
        div {
          flex: 1;
        }
      }
      .dataClass {
        display: flex;
        align-items: center;
        color: #484e51;
        margin-bottom: 0.2rem;
        img {
          width: 0.5rem;
          height: 0.5rem;
          flex: 1;
        }
        & > div {
          flex: 1;
        }
        .numberClass {
          font-size: 0.22rem;
        }
      }
    }
    .imgsClass {
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 9999;
      bottom: 2%;
      img {
        width: 1.4rem;
        height: 1.4rem;
      }
    }
  }
}
</style>